<template>
  <div class="floodRehearsal">
    <div class="firstDiv">
      <common-title :title="'洪水过程线'"></common-title>
      <div class="content">
        <div class="chart-base-info">
          <span class="max-flow">洪峰流量：228.43m³/s</span>
          <span class="z-x-q-j">置信区间：65%~80%</span>
        </div>
        <div class="my-chart" id="flood-hygrograph"></div>

      </div>
    </div>
    <div class="secondDiv">
      <common-title :title="'洪水影响分析'"></common-title>
      <div class="content">
        <div class="itemDiv">
          <img src="../../assets/img/floodRehearsal/villageImg.png" />
          <div class="line"></div>
          <div class="contentDiv">
            <p class="eng">VILLAGE</p>
            <div class="count">
              <p>村庄</p>
              <p><span>1</span>个</p>
            </div>
          </div>
        </div>
        <div class="itemDiv">
          <img src="../../assets/img/floodRehearsal/numberImg.png" />
          <div class="line"></div>
          <div class="contentDiv">
            <p class="eng">FIELD</p>
            <div class="count">
              <p>田地</p>
              <p><span>1365</span>亩</p>
            </div>
          </div>
        </div>
        <div class="itemDiv">
          <img src="../../assets/img/floodRehearsal/populationImg.png" />
          <div class="line"></div>
          <div class="contentDiv">
            <p class="eng">POPULATION</p>
            <div class="count">
              <p>人口</p>
              <p><span>39</span>个</p>
            </div>
          </div>
        </div>
        <div class="itemDiv">
          <img src="../../assets/img/floodRehearsal/SpecialImg.png" />
          <div class="line"></div>
          <div class="contentDiv">
            <!-- POPULATIONS -->
            <p class="eng">SPECIAL POPULATINS</p>
            <div class="count">
              <p>特殊人群</p>
              <p><span>1</span>个</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="thirdDiv">
      <common-title :title="'防汛责任人'"></common-title>
      <div class="content">
        <div class="item">
          <span>行政责任人</span>
          <span title="李润-镇长">李润-镇长</span>
          <span>13903481882</span>
        </div>
        <div class="item">
          <span>技术责任人</span>
          <span title="董佰阳-站长">董佰阳-站长</span>
          <span title="13835937320">13835937320</span>
        </div>
        <div class="item">
          <span>巡查责任人</span>
          <span title="李迎陪-管护员">李迎陪-管护员</span>
          <span title="18295958885">18295958885</span>
        </div>
      </div>

    </div>

    <div class="fourthDiv">
      <common-title :title="'防汛预案'"></common-title>
      <div class="content">
        <ul class="item">
          <li v-for="(item, index) in listData" :key="index" :class="{ isJS: index % 2 == 0 }"
            @click="intoDangerouslLine">
            <div v-if="item.fxyawb">
              <span class="stitle">{{
        index + 1 + "、" + item.fxyawb &&
        item.fxyawb.split("/")[3].split(".")[0]
      }}</span>
              <span class="scontent" style="margin-left: 20px">{{
          item.fxyabzsj
                }}</span>
            </div>
            <div class="stitle" v-else style="width: 100%; text-align: center">
              暂无数据
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>



<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import * as echarts from "echarts";
import commonTitle from "../../components/common-title/index.vue";
import { useStore } from '../../store/index.ts'
import { getRainData } from "../../api/index";

const store = useStore()
let listData = reactive([
  {
    fxyawb: "1234/32/4/1.pdf",
    fxyabzsj: "杨家门大型坝防汛预案",
  },
]);
onMounted(() => {
  getRainData()
    .then((res: any) => {
    })
    .catch((err: any) => {
      console.error("获取预报数据错误", err);
    });


  renderFloodHygrographLine();
});
let myChart: any = null;
const renderFloodHygrographLine = () => {
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(document.getElementById("flood-hygrograph"));
  let option = {
    grid: {
      left: "7%",
      bottom: 20,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "#505765",
        },
      },
    },
    legend: {
      data: ['本区域降雨量', '流量'],
      left: 0,
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: false },
        // prettier-ignore
        data: [
          '2024-04-15 09:32:56',
          '2024-04-15 10:32:56',
          '2024-04-15 11:32:56',
          '2024-04-15 12:32:56',
          '2024-04-15 13:32:56',
          '2024-04-15 14:32:56'],
        axisLabel: {
          color: "#fff",
        },
      },
    ],
    yAxis: [
      {
        show: true,
        name: "流量(m³/s)",
        type: "value",
        axisLabel: {
          color: "#fff",
        },
        nameTextStyle: {
          color: "#fff",
        },
      },
      {
        show: true,
        name: "本区域降雨量(mm)",
        nameLocation: "start",
        alignTicks: true,
        type: "value",
        inverse: true,
        axisLabel: {
          color: "#fff",
        },
        nameTextStyle: {
          color: "#fff",
          padding: [0, 15, 0, 0]
        },
      },
    ],
    series: [
      {
        name: "流量",
        type: "line",
        lineStyle: {
          shadowColor: "#9aa6ff", //透明的颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          opacity: 1, //透明度
          shadowBlur: 8, //阴影大小
          type: "solid", //实线
          width: 2,
        },
        itemStyle: {
          color: "#3740ff",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3740ff",
            },
            {
              offset: 1,
              color: "#ffffff",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        markArea: {
          silent: true,
          itemStyle: {
            opacity: 0.3,
          },
        },
        data: [0, 1, 1, 1, 186.26, 228.43],
        smooth: true,
      },
      {
        name: "本区域降雨量",
        type: "line",
        yAxisIndex: 1,
        itemStyle: {
          color: "#45b9d0",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#ffffff",
            },
            {
              offset: 1,
              color: "#45b9d0",
            },
          ]),
        },
        lineStyle: {
          shadowColor: "#c7f6ff", //透明的颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          opacity: 1, //透明度
          shadowBlur: 8, //阴影大小
          type: "solid", //实线
          width: 2,
        },
        emphasis: {
          focus: "series",
        },
        markArea: {
          silent: true,
          itemStyle: {
            opacity: 0.3,
          },
        },
        data: [50, 100, 50, 0, 0, 0],
        smooth: true,
      },
    ],
  };
  myChart.setOption(option);
}

const intoDangerouslLine = () => {
  store.showIsBZLX = true;
}
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}

.floodRehearsal {
  padding-left: 15px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .firstDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

    .content {
      flex: 1;
      font-family: "PingFangReg";
      padding-bottom: 2vh;
      box-sizing: border-box;

      .chart-base-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        font-size: 14px;
        margin: 1vh 0;
      }

      .my-chart {
        width: 100%;
        height: 18vh;
      }
    }
  }

  .secondDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 2vh;
    box-sizing: border-box;

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .itemDiv {
        width: 47%;
        display: flex;
        margin-top: 1vh;

        img {
          width: 50px;
        }

        .line {
          width: 5px;
          height: 100%;
          background: rgba(121, 219, 230, 0.18);
          margin: 0 1vh;
        }

        .contentDiv {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .eng {
            font-size: 12px;
            font-family: Regular;
            font-weight: 400;
            color: #64a2c1;
          }

          .count {
            display: flex;
            justify-content: space-between;
            align-items: center;

            p:nth-child(1) {
              font-size: 16px;
              font-family: Regular;
              font-weight: 800;
              color: #ffffff;
            }

            p:nth-child(2) {
              color: #ffffff;
              font-size: 12px;

              span {
                font-size: 24px;
                font-family: 'YSBTH';
                font-weight: 400;
                color: #ffffff;
                text-shadow: 0px 2px 4px #000000;
              }
            }
          }
        }
      }
    }
  }

  .thirdDiv {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    font-family: "PingFangReg";

    .content {
      box-sizing: border-box;
      padding: 2vh 0;

      .item {
        display: flex;
        font-size: 16px;
        line-height: 28px;
        width: 100%;
        white-space: nowrap;

        span {
          flex: 3;
          text-overflow: ellipsis;
          overflow: hidden;
          display: inline-block;
          padding-right: 5px;

          &:nth-child(1) {
            flex: 2;
          }
        }
      }
    }

  }

  .fourthDiv {
    flex: 1;

    .content {
      box-sizing: border-box;
      padding: 2vh 0;

      ul {
        overflow: hidden;
        overflow-y: auto;
        list-style: none;
        padding: 0;
        margin: 0 auto;

        li,
        a {
          display: block;
          height: 30px;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
          font-size: 15px;
        }

        li {
          padding: 0 18px 0 10px;
          cursor: pointer;

          &.isJS {
            background: rgba(0, 178, 176, 0.1);
          }
        }
      }
    }
  }
}
</style>